<template>
  <Header />
  <div class="courseClassifyOuter">
    <div class="courseClassify">
      <!-- 一级分类 -->
      <div class="courseClassifyItem">
        <span>课程方向：</span>
        <span>全部</span>
        <ul class="classify">
          <li v-for="classify in firstList" :key="classify.id" @click="fristNav(classify.id)">
            {{ classify.categoryName }}
          </li>
        </ul>
      </div>
      <!-- 二级分类 -->
      <div class="courseClassifyItem">
        <span>课程分类：</span>
        <span>全部</span>
        <ul class="classify">
          <li v-for="item in secondList" :key="item.id" @click="secondNav(item.id)">
            {{ item.categoryName }}
          </li>
        </ul>
      </div>
      <!-- 三级分类 -->
      <div class="courseClassifyItem">
        <span>课程难度：</span>
        <span>全部</span>
        <ul class="classify">
          <li>初级</li>
          <li>中级</li>
          <li>高级</li>
        </ul>
      </div>
    </div>
  </div>
  <div class="courseListOuter">
    <div class="courseList">
      <div class="courseTop">
        <ul class="courseTopL">
          <li v-for="item in sourseFilter" :key="item.id" @click="evtFilter(item.id)">
            {{ item.msg }}|
          </li>
          <li class="coursePrice" @click="evtFilter(4)">
            <span>价格</span>
            <div class="icon">
              <el-icon :size="8">
                <CaretTop />
              </el-icon>
              <el-icon :size="8">
                <CaretBottom />
              </el-icon>
            </div>
          </li>
        </ul>
        <ul class="courseTopR">
          <li>
            <el-checkbox label="免费教程" />
          </li>
          <li>
            <el-checkbox label="会员免费课程" />
          </li>
        </ul>
      </div>
      <div class="courseContent">
        <ul class="courseGoodCart">
          <li v-if="isShow" class="courseGoodCartItem" 
            v-for="item in courseList" :key="item.id" @click="toDetail(item.id)">
            <div class="courseGoodCartItemImg">
              <img :src="item.courseCover" alt="课程">
            </div>
            <div class="courseGoodCartItemText">
              <h3>{{ item.courseName }}</h3>
              <p>
                {{ useCourseType(item.courseLevel) }}
                <i class="iconfont icon-dian"></i>
                {{ item.clicks }}
              </p>
              <span class="coursePrice">￥{{ item.discountPrice }}</span>
            </div>
          </li>
          <li class="courseLoading" v-else>加载中......</li>
        </ul>
      </div>
      <div class="courseBootom">
        <div class="demo-pagination-block">
          <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :small="small"
            :disabled="disabled" :background="background" layout="total, prev, pager, next" :total="courseTotal"
            @size-change="handleSizeChange" @current-change="handleCurrentChange" />
        </div>
      </div>
    </div>
  </div>
  <Footer />
</template>

<script setup lang="ts">
import { ref, onBeforeMount } from 'vue'
import { CaretTop, CaretBottom } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router';

import Header from '../components/common/Header.vue';
import Footer from '../components/common/Footer.vue';

import { getFirstCategories, getSecondCategories, courseSearch } from '../request/api/api';
import useCourseType from '../hooks/useCourseType'

onBeforeMount(() => {
  getFirstCategory()
  secondCategories({ categoryId: -1 })
  getCourseList({ pageNum: 1, pageSize: 8 })
})

// 路由
const router = useRouter()

// 分页
const currentPage = ref(1)
const pageSize = ref(10)
const small = ref(false)  // 小型样式
const background = ref(true)  // 为按钮添加背景色
const disabled = ref(false)  // 禁用分页

const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
}
const handleCurrentChange = (val: number) => {
  getCourseList({ pageNum: val, pageSize: 8 })
  console.log(`current page: ${val}`)
}
// 分类

// 一级分类数据
const firstList = ref([{
  id: '',
  categoryName: '',  // 一级分类名
}])

// 二级分类数据
const secondList = ref([{
  id: '',
  categoryName: '',  // 二级分类名
}])

// 获取一级分类数据
const getFirstCategory = async () => {
  const { data: res } = await getFirstCategories();
  firstList.value = res.list
}

/**
 * 一级分类点击事件
 * @param {string} id - id 
 */
const fristNav = async (id: string) => {
  secondCategories({ categoryId: id })
  getCourseList({ pageNum: 1, pageSize: 8, entity: { firstCategory: id } })
}

/**
 * 获取二级分类数据
 * @param {categoryId} params 
 * @param {string} params.categoryId - 分类Id
 */
const secondCategories = async (params: object) => {
  const { data: res } = await getSecondCategories(params)
  secondList.value = res.list.slice(0, 8)
}

/**
 * 二级分类点击事件
 * @param {string} id 
 */
const secondNav = (id: string): void => {
  getCourseList({ pageNum: 1, pageSize: 10, entity: { secondCategory: id } })
}

/* 课程 */

// loading
const isShow = ref<boolean>(true)

// 课程数据
const courseList = ref([{
  id: '',
  courseName: '',  // 课程名
  courseCover: '',  // 图
  clicks: 0,  // 人数
  discountPrice: 0,  // 价格
  courseLevel: 0,  // 等级
}])

let courseTotal = ref<number>(0)

/**
 * 获取课程数据
 * @param {pageNum, pageSize, entity} params 
 * @param {number} params.pageNum
 * @param {number} params.pageSize
 * @param {object} [params.entity]
 */
const getCourseList = async (params: object) => {
  isShow.value = false
  const { data: res } = await courseSearch(params)
  courseList.value = res.pageInfo.list
  courseTotal.value = res.pageInfo.total
  isShow.value = true
}

// 课程筛选
const sourseFilter = ref([
  { id: 1, msg: '综合' },
  { id: 2, msg: '最新课程' },
  { id: 3, msg: '最多购买' }
])

/**
 * 课程筛选点击事件
 * @param {number} id
 */
const evtFilter = (id: number) => {
  console.log(id)
}

/**
 * 课程详情跳转
 * @param {number} id 
 */
const toDetail = (id:string)=>{
  router.push({
    path:'/course/detail',
    query:{id}
  })
}

</script>

<style lang="scss" scoped>
$border: 1px solid orange;

.courseClassifyOuter {
  width: 100%;
  height: 197px;
  background-color: #f3f5f9;
  padding: 10px 0px 10px 16px;

  .courseClassify {
    width: 80%;
    height: 100%;
    margin: 0 auto;
    padding: 30px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;

    .courseClassifyItem {
      display: flex;
      align-items: center;

      &>span:first-child {
        font-weight: bold;
        font-size: 16px;
      }

      &>span:last-of-type {
        width: 50px;
        height: 30px;
        line-height: 30px;
        text-align: center;
        color: #388fff;
        font-size: 14px;
        background-color: rgba(44, 128, 255, .1);
        border-radius: 5px;
        margin: 0 20px 0 0px;
      }

      .classify {
        display: flex;
        flex-wrap: wrap;

        &>li {
          font-size: 14px;
          margin-right: 30px;
          cursor: pointer;
        }
      }
    }
  }
}

.courseListOuter {
  width: 100%;
  background-color: white;
  padding: 20px 0;

  .courseList {
    width: 80%;
    margin: 0 auto;
    border: $border;

    .courseTop {
      padding: 0 20px;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .courseTopL {
        display: flex;

        &>li {
          font-size: 14px;
          font-weight: 400;
          color: #515759;
          margin-right: 16px;
          cursor: pointer;
          cursor: pointer;
        }

        .coursePrice {
          display: flex;

          .icon {
            display: flex;
            flex-direction: column;
            align-items: center;
            margin: 0px 0 0 3px;
          }
        }
      }

      .courseTopR {
        display: flex;

        &>li:first-child {
          margin-right: 30px;
        }
      }
    }
  }
}

.courseContent {
  .courseGoodCart {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    .courseGoodCartItem {
      width: 230px;
      border: 1px solid rgb(27, 87, 150);
      margin-bottom: 20px;
      padding-bottom: 10px;
      box-shadow: 0 3px 6px 1px rgba(0, 0, 0, .3);

      .courseGoodCartItemImg {
        width: 230px;
        margin-bottom: 16px;

        &>img {
          width: 100%;
        }
      }

      .courseGoodCartItemText {
        height: 100px;
        display: flex;
        padding: 0 20px;
        flex-direction: column;
        justify-content: space-between;

        &>h3 {
          font-size: 16px;
        }

        &>p {
          font-size: 13px;
          color: rgb(99, 99, 99);
        }

        .coursePrice {
          font-size: 13px;
        }
      }
    }

    .courseLoading {
      height: 100px;
      width: 100%;
      text-align: center;
      line-height: 100px;
      font-size: 20px;
      font-weight: bold;
    }
  }
}

.courseBootom {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>